<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap1 {
				position: relative;
				z-index: -1;
				width: 600%;
				height: 300px;
			}
			
			.wrap {
				position: relative;
				margin: 0 auto;
				overflow: hidden;
				width: 500px;
				height: 300px;
			}
			
			.wrap1 li {
				display: inline-block;
				position: absolute;
			}
			
			.wrap1 img,
			.wrap1 li {
				width: 500px;
				height: 300px;
			}
			
			.wrap span {
				position: absolute;
				display: inline-block;
				width: 80px;
				height: 100%;
				font-size: 100px;
				text-align: center;
			}
			
			#pre {
				left: 0;
				line-height: 300px;
				color: red;
			}
			
			#next {
				right: 0;
				line-height: 300px;
				color: red;
			}
			
			ul {
				padding: 0;
			}
			
			#round {
				position: absolute;
				left: 50%;
				margin-left: -150px;
				bottom: 0;
				width: 300px;
				text-align: center;
			}
			
			#round li {
				display: inline-block;
				list-style-type: none;
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 50%;
			}
			
			#round .on {
				background-color: black;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<span id="pre">
				<
			</span>
			<span id="next">
				>
			</span>
			<ul id="round">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul class="wrap1" id="wrap1">
			</ul>
		</div>

	</body>
	<script type="text/javascript">
		//初始化图片
		(function() {
			var owrap = document.getElementsByClassName("wrap1")[0];
			var oRound = document.getElementById("round");
			var rLis = oRound.getElementsByTagName("li");
			var lis = owrap.getElementsByTagName("li");
			var str = owrap.innerHTML;
			str += `<li><img src="images/${6}.jpg"/></li>`;
			for(var i = 1; i <= 5; i++) {
				str += `<li><img src="images/${i}.jpg"/></li>`;
			}
			owrap.innerHTML = str;
			var r = -1000;
			for(var i = 0; i <= lis.length - 1; i++) {
				rLis[i].index = i;
				lis[i].style.left = r + "px";
				r += 500;
			}
		})();

		//属性
		var attr = "left";
		//毫秒
		var time = 300;
		//步长
		var value = 500;
		var index = 0;
		var time1 = new Date();

		//书写左移右移逻辑
		(function() {
			var oPre = document.getElementById("pre");
			var oNext = document.getElementById("next");
			var lis = document.getElementById("round").getElementsByTagName("li");
			//节点
			var wrap1 = document.getElementById("wrap1");
			var ele = wrap1.getElementsByTagName("li");

			oPre.onclick = function() {
				var time2 = new Date();
				if((time2 - time1) > (time * ele.length / 2)) {
					lis[index].classList.toggle("on");
					index--;
					index < 0 && (index = 5);
					for(var i = 0; i < ele.length; i++) {
						var att = parseInt(ele[i].style.left);
						att -= value;
						if(att < -1000) att = 1500, ele[i].style.visibility = "hidden", (function(ll) {
							setTimeout(function() {
								ll.style.visibility = "visible";
							}, 300);
						})(ele[i]);
						animation(ele[i], attr, att, time);
					}
					lis[index].classList.toggle("on");
					time1 = time2;
				}

			}
			oNext.onclick = function() {
				var time2 = new Date();
				if((time2 - time1) > (time * ele.length / 2)) {
					lis[index].classList.toggle("on");
					index++;
					index > 5 && (index = 0);
					for(var i = 0; i < ele.length; i++) {
						var att = parseInt(ele[i].style.left);
						att += value;
						if(att > value * 3) att = -1000, ele[i].style.visibility = "hidden", (function(ll) {
							setTimeout(function() {
								ll.style.visibility = "visible";
							}, 300);
						})(ele[i]);
						animation(ele[i], attr, att, time);
					}
					lis[index].classList.toggle("on");
					time1 = time2;
				}
			}
		})();
		//小圆点
		(function() {
			var lis = document.getElementById("round").getElementsByTagName("li");
			var open = document.getElementById("round").getElementsByClassName("on");
			var ele = document.getElementById("wrap1").getElementsByTagName("li");
			for(var i = 0; i < lis.length; i++) {
				(function(i) {
					lis[i].onclick = function() {
						var now = this.index - open[0].index;
						var abs = Math.abs(now);
						var time2 = new Date();
						if((time2 - time1) > (time * ele.length / 2)) {
							open[0].classList.toggle("on");
							//>0 往右<0往左
							if(now == 0) {

							} else if(now > 0) {
								for(var i = 0; i < abs; i++) {
									index++;
									index > 5 && (index = 0);
								}
							} else {
								for(var i = 0; i < abs; i++) {
									index--;
									index < 0 && (index = 5);
								}
							}
							for(var j = 0; j <= abs; j++) {
								for(var i = 0; i < ele.length; i++) {
									var att = parseInt(ele[i].style.left);
									if(now == 0) {

									} else if(now > 0) {
										console.log(1);
										var att = parseInt(ele[i].style.left);
										att += value;
										if(att > value * 3) att = -1000, ele[i].style.visibility = "hidden", (function(ll) {
											setTimeout(function() {
												ll.style.visibility = "visible";
											}, time/abs);
										})(ele[i]);
										animation(ele[i], attr, att, time/abs);
									} else {
										var att = parseInt(ele[i].style.left);
										att -= value;
										if(att < -1000) att = 1500, ele[i].style.visibility = "hidden", (function(ll) {
											setTimeout(function() {
												ll.style.visibility = "visible";
											}, time/abs);
										})(ele[i]);
										animation(ele[i], attr, att, time/abs);
									}
								}
							}
							this.classList.toggle("on");
							time1 = time2;
						}
					}
				})(i)
			}
		})();

		//运动框架
		/**
		 * 1.ele
		 * * 2.时间
		 * 3.目标值
		 * 4.attr
		 */

		//运动框架
		function animation(ele, attr, value, time, callback) {
			//获取时间开始值
			var goTime = new Date().getTime(), //当前时间的毫秒数
				startValue = parseFloat(getStyle(ele)[attr]), //初始值
				change = value - startValue; //结束 减去 开始（总路程）
			function fn() {
				//(当前时间 - 开始时间 ) / 结束时间
				var now = (new Date().getTime() - goTime) / time;

				if(now >= 1) {
					//超过1就等于1
					now = 1;
					ele.style[attr] = startValue + change * now + 'px';
					callback && callback.call(ele);
				} else {
					//开始位置 + 总路程*时间比例
					ele.style[attr] = startValue + change * now + 'px';
					//当前时间比例
					requestAnimationFrame(fn); //下次浏览器重绘
				}
			}
			fn();
		}
		//获取最终样式
		function getStyle(ele) {
			return ele.currentStyle || getComputedStyle(ele);
		}
	</script>

</html>